<%@ taglib prefix="s" uri="/struts-tags" %>  
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjc" uri="/struts-jquery-chart-tags"%>
<%@ taglib prefix="sjm" uri="/struts-jquery-mobile-tags"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<sj:head jqueryui="true" jquerytheme="cupertino"/>
<script type="text/javascript">
        $.subscribe('chartHover', function(event, data) {
    $("#topicsHover").text(event.originalEvent.pos.x.toFixed(2)+','+event.originalEvent.pos.y.toFixed(2));
        });
        $.subscribe('chartClick', function(event, data) {
        	var item = event.originalEvent.item;
    if (item) {
      $("#topicsClick").text("You clicked point " + item.dataIndex + " ("+item.datapoint[0]+","+item.datapoint[1]+") in " + item.series.label + ".");
      event.originalEvent.plot.highlight(item.series, item.datapoint);
    }
        });
</script>
<title>Reporte Grafico</title>
</head>
<body>
<sjm:div role="page" id="chartpage">
	<sjm:div role="header">
		<s:url var="back" action="bienvenida" namespace="/common"/>
		<sjm:a button="true" buttonIcon="arrow-l" href="%{back}" >Back</sjm:a>
		<h1>Reporte Grafico Barra</h1>		
	</sjm:div>
	<sjm:div role="content" align="center" >
		<div id="topicsHover"></div>
		<div id="topicsClick"></div>
		<sjc:chart id="chartAjaxTwo"
    				cssStyle="width: 600px; height: 400px;"
    	>
    		<sjc:chartData
    			id="chartAjaxTwoData1"
	    		label="Map -Double, Double-"
	    		list="doubleMap"
	    		bars="{show : true, barWidth: 0.7}"
	    		stack="stack1"
	    	/>
	    	<sjc:chartData
	    		id="chartAjaxTwoData2"
	    		label="List -ListValue-"
	    		list="objList"
	    		listKey="myKey"
	    		listValue="myValue"
	    		bars="{show : true, barWidth: 0.7}"
	    		stack="stack1"
	    	/>
    	</sjc:chart>
   
	</sjm:div>
	<sjm:div role="collapsible" data-collapsed="true">
	</sjm:div>
</sjm:div>
</body>
</html>